<template>
  <div class="app-container">
    <wise-crud ref="wise-crud" :urls="urls" :fields="fields" :handle="handle" :filters="filters">
      <template v-slot:handle="slotProps">
        {{ slotProps.row.ks }}
       
        <el-button v-if="slotProps.row.status === 0 && slotProps.row.isKs === 1" type="primary" size="small" round
          @click.native.prevent="startHandle(slotProps.row)">开始</el-button>
        <el-button v-if="slotProps.row.status === 1 && slotProps.row.isKs === 1" type="primary" size="small" round
          @click.native.prevent="finishHandle(slotProps.row)">完成</el-button>
      
       
          <el-button v-if="slotProps.row.status === 2 && slotProps.row.isKs === 0 " type="primary" size="small" round
          @click.native.prevent="resetHandle(slotProps.row)">复位</el-button>
         

      
      </template>
    </wise-crud>
  </div>
</template>
<script>
  import WiseCrud from '@/components/Crud/wiseCrud'
  import {
    postHandle
  } from '@/api'
  export default {
    name: 'PlanInfoManage',
    components: {
      WiseCrud
    },
    data() {
      return {
        urls: {
          list: '/api/v1/welder-sbtx-second/plan-info-comb/list-admin',
          add: '/api/v1/welder-sbtx-second/plan-info/create',
          show: '/api/v1/welder-sbtx-second/plan-info-comb/show/',
          update: '/api/v1/welder-sbtx-second/plan-info-comb/updatePlan/',
          delete: '/api/v1/welder-sbtx-second/plan-info/remove/'
        }
      }
    },
    computed: {
      spaceId() {
        return this.$store.state.project.spaceId
      },
      handle() {
        return ['add']
      },
      fields() {
        let arr = [{
          label: '序号',
          type: 'index',
          use: ['table']
        }]
        if (this.$store.state.user.project) {
          arr.push({
            prop: 'projectId',
            defaultValue: this.$store.state.user.project.id,
            use: ['add', 'edit']
          })
        } else {
         
        }
        arr.push({
          label: '计划名称',
          prop: 'planName',
          type: 'text',
          labelWidth: '130px',
          rules: [{
            required: true,
            message: '请输入计划名称',
            trigger: 'change'
          }],
          placeholder: '请输入计划名称',
          use: ['table', 'add', 'view', 'edit', 'search']
        }, {
          label: '计划结束时间',
          prop: 'planTime',
          type: 'datetime',
          format: 'YYYY-MM-DD HH:mm:ss',
          labelWidth: '130px',
          sortable: true,
          rules: [{
            required: true,
            message: '请选择计划时间',
            trigger: 'change'
          }],
          placeholder: '请选择计划时间',
          use: ['table', 'add', 'view', 'edit', 'search']
        }, {
          label: '计划焊口数',
          prop: 'weldPlanNumber',
          type: 'number',
          labelWidth: '130px',
          placeholder: '请输入计划焊口数',
          use: [     ]
        }, {
          label: '完成焊口数',
          prop: 'weldFinshNumber',
          type: 'number',
          labelWidth: '130px',
          placeholder: '请输入完成焊口数',
          use: [   ]
        }, {
          label: '焊口数据展示方式',
          prop: 'type',
          type: 'number',
          placeholder: '0文字 1柱状图',
          labelWidth: '130px',
          use: [   ]
        }, {
          label: '焊口数据展示方式',
          prop: 'type',
          type: 'render',
          labelWidth: '130px',
          tableRender: (h, row, index) => {
            if (row.type === 0) {
              return h('div', '文字')
            } else if (row.type === 1) {
              return h('div', '柱状图')
            } else {
              return h('div', '')
            }
          },
          viewRender: (h, item, object) => {
            if (object.type === 0) {
              return h('div', '文字')
            } else if (object.type === 1) {
              return h('div', '柱状图')
            } else {
              return h('div', '')
            }
          },
          use: [ ]
        }, {
          label: '计划状态',
          prop: 'status',
          type: 'render',
          labelWidth: '130px',
          tableRender: (h, row, index) => {
            if (row.status === 0) {
              return h('div', '未完成')
            } else if (row.status === 1) {
              return h('div', '进行中')
            } else if (row.status === 2) {
              return h('div', '完成')
            }
          },
          use: ['table']
        }, {
          label: '注意事项',
          prop: 'considerations',
          type: 'textarea',
          labelWidth: '130px',
          placeholder: '请输入注意事项',
          use: ['table', 'add', 'view', 'edit', 'search']
        }, {
          prop: 'spaceId',
          defaultValue: this.$store.state.project.spaceId,
          use: ['add', 'edit']
        })
        arr.push({
          label: '操作',
          type: 'handle',
          use: ['table'],
          handle: ['edit', 'view', 'delete'],
          tableWidth: 300
        })
        return arr
      },
      filters() {
        return [{
          field: 'spaceId',
          operator: 'EQUALS',
          value: this.$store.state.project.spaceId
        }]
      }
    },
    methods: {
      startHandle(row) {
        
        this.$confirm('计划是否开始?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          row.status = 1
          this.updateStatus(row)
        
          this.$message({
            type: 'success',
            message: '计划开始成功!'
          })
           
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      
      },
      finishHandle(row) {
        this.$confirm('计划是否完成?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          row.status = 2
         this.updateStatus(row)
         
          this.$message({
            type: 'success',
            message: '计划完成成功!'
          })
 
     
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      resetHandle(row) {
        this.$confirm('计划是否复位?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          row.status = 0
          this.updateStatus(row)
          
          this.$message({
            type: 'success',
            message: '复位成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      updateStatus(obj) {
        postHandle(this.urls.update + obj.id, {
          d: {},
          obj
        }).then(response => {
          this.object = response.result
          this.$nextTick(() => {
            this.$refs['wise-crud'].handleSearch()
          })
        })
      }
    }
  }
</script>

<style>

</style>